class Cart{
    constructor(){
        this.bottom = document.querySelector(".bottom")
        this.getData();
        this.init();
        this.addEvent();
    }
    getData(){
        if(getCookie("data")){
            this.dt = JSON.parse( getCookie("data") );   
        }else{
            this.dt = "";                
        }
        //console.log(this.dt)
        //console.log(this.dt.msg)
        //console.log(document.cookie)
    }
    init(){
        let str = "";
        for(var i=0;i<this.dt.length;i++){
            str += `    
                    <ul index = "${this.dt[i].goodsId}">
                        <li><input id="good3" type="checkbox" checked="checked"><img src="${this.dt[i].msg.img.largeImg[0]}"><span>${this.dt[i].msg.p}</span></li>
                        <li>￥<span>${this.dt[i].msg.span}</span> <em> / ${this.dt[i].msg.s}</em></li>
                        <li><input type = "number" min = "1" value = "${this.dt[i].sum}" class = "input" /> </li>
                        <li>￥ ${this.dt[i].msg.span *  this.dt[i].sum}</li>
                        <li><img src = "http://cart.juanpi.com/static/media/delete.91359608.png" class = "img"></li>
                    </ul>`
        }
                                
        this.bottom.innerHTML = str;
    }
    addEvent(){
        let that = this;
        this.bottom.onclick = function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
            if(target.className === "img"){
                console.log(1)
                that.goodsId = target.parentNode.parentNode.getAttribute("index");
                target.parentNode.parentNode.remove();
                that.removeData();
            }
        }
        this.bottom.oninput = function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
            if(target.className === "input"){
                that.sum = target.value;
                that.goodsId = target.parentNode.parentNode.getAttribute("index");
                that.PriceDate();
                target.parentNode.nextElementSibling.innerHTML ="￥"+(that.sum * target.parentNode.previousElementSibling.firstElementChild.innerHTML).toFixed(1);
                
            }
        }
    }
    removeData(){
        for(var i=0; i<this.dt.length; i++){
            if(this.dt[i].goodsId === this.goodsId){
                this.dt.splice(i,1);
                break;
            }
            
        }
        setCookie("data",JSON.stringify(this.dt),{expires:30})
    }
    PriceDate(){
        for(var i=0; i<this.dt.length; i++){
            if(this.dt[i].goodsId === this.goodsId){
                this.dt[i].sum = this.sum;
                break;
            }
            
        }
        setCookie("data",JSON.stringify(this.dt),{expires:30})
    }
}

new Cart();



var checkall = document.getElementById('checkall');
var input = document.getElementsByTagName('input');
var div = document.getElementsByTagName('div');
var length = input.length;
checkall.onclick = function () {
    for(var i=0;i<length;i++) {
        input[i].checked = this.checked;
    }
}